(function (fruit, util, ui) {
    ui.define('fruit.ui.SelectableList', {
        view: {
            tag: 'ul',
            props: {
                template: '{#template}',
                items: '{#items}'
            }
        },
        properties: {
            template: {
                value: {
                    view: {
                        tag: 'li',
                        props: {
                            'class': 'f-list-item',
                            role: 'listitem',
                            title: '{@value}'
                        },
                        content: [
                            {
                                name: 'cb',
                                type: 'fruit.ui.CheckBox',
                                props: {
                                    visible: '{#checkbox}',
                                    checked: '{#selected}'
                                }
                            },
                            {
                                tag: 'i'
                            },
                            {
                                tag: 'a',
                                content: '{@value}'
                            }
                        ]
                    },
                    properties: {
                        checkbox: {
                            value: false,
                            observable: true
                        },
                        selected: {
                            value: false,
                            observable: true
                        }
                    }
                },
                observable: true
            },
            selectionText: {
                getter: function () {
                    var labelPath = this.labelPath();
                    if (this.multiple()) {
                        var labels = [], selectedItems = this.selectedItems();

                        util.forEach(this.selectedItems(), function (item) {
                            labels.push(fruit.Binding.getByPath(item, labelPath));
                        }, this);

                        return labels.join(', ');
                    }
                    else {
                        return fruit.Binding.getByPath(this.selectedItem(), labelPath);
                    }
                }
            },
            selectedIndex: {
                getter: function () {
                    return this._selectedIndex;
                },
                setter: function (value) {
                    this._selectedIndex = value;
                    if (value >= 0 && this._items && this._items[value]) {
                        this.selectedItem(this._items[value]);
                    }
                }
            },
            selectedItem: {
                getter: function () {
                    return this._selectedItem;
                },
                setter: function (value) {
                    var items = this._items;
                    this._selectedItem = value;
                    if (items) {
                        if (items.indexOf) {
                            this._selectedIndex = items.indexOf(value);
                        }
                        else {
                            this._selectedIndex = util.indexOf(items, value);
                        }
                    }
                    else {
                        this._selectedIndex = -1;
                    }
                    this.notifyPropertyChanged('selectedIndex');
                    this.notifyPropertyChanged('selectedItem');
                    this.notifyPropertyChanged('selectionText');
                }
            },
            selectedItems: {
                getter: function () {
                    return this._selectedItems;
                },
                setter: function (value) {
                    this._selectedItems = value;

                    this.$().children(function (child) {
                        var model = child.model();
                        child.selected(false);
                        util.forEach(value, function (item) {
                            if (util.equals(model, item)) {
                                child.selected(true);
                            }
                        });
                    });

                    this.notifyPropertyChanged('selectionText');
                }
            },
            items: {
                getter: function () {
                    return this._items;
                },
                setter: function (value) {
                    if (this._items !== value) {
                        this._items = value;
                        this._selectedIndex = this._selectedIndex != null ? this._selectedIndex : -1;
                        this._selectedItem = this._selectedItem != null ? this._selectedItem : null;
                        this.notifyPropertyChanged('items');
                        this.notifyPropertyChanged('selectedIndex');
                        this.notifyPropertyChanged('selectedItem');
                        this.notifyPropertyChanged('selectionText');
                    }
                }
            },
            labelPath: {
                getter: function () {
                    return this._labelPath;
                },
                setter: function (value) {
                    this._labelPath = value;
                    this.template({
                        view: {
                            tag: 'li',
                            props: {
                                'class': 'f-list-item',
                                role: 'listitem',
                                title: '{' + value + '}'
                            },
                            content: [
                                {
                                    name: 'cb',
                                    type: 'fruit.ui.CheckBox',
                                    props: {
                                        visible: '{#checkbox}',
                                        checked: '{#selected}'
                                    }
                                },
                                {
                                    tag: 'i'
                                },
                                {
                                    tag: 'a',
                                    content: '{' + value + '}'
                                }
                            ]
                        },
                        properties: {
                            checkbox: {
                                value: false,
                                observable: true
                            },
                            selected: {
                                value: false,
                                observable: true
                            }
                        }
                    });
                    this.notifyPropertyChanged('labelPath');
                    this.notifyPropertyChanged('selectionText');
                }
            },
            multiple: {
                value: false
            }
        },
        methods: {
            onInit: function () {
                this.inherited();
                var self = this;
                this.$().itemGenerator(function (itemEl, itemModel) {
                    itemEl.model(itemModel);
                    if (self.multiple()) {
                        itemEl.checkbox(true);

                        itemEl.on('mousedown', function (sender, event) {
                            event.preventDefault();
                        });

                        itemEl.on('click', function (sender, event) {
                            var selected = !itemEl.selected();
                            var selectedItems = self.selectedItems();
                            if (selectedItems) {
                                if (selected) {
                                    selectedItems.add(itemModel);
                                }
                                else {
                                    selectedItems.remove(itemModel);
                                }
                            }
                            itemEl.selected(selected);
                            event.preventDefault();
                            self.notifyPropertyChanged('selectionText');
                        });
                    }
                    else {
                        itemEl.on('mousedown', function () {
                            self.selectedItem(itemModel);
                            self.notifyPropertyChanged('selectionText');
                        });
                    }
                    return itemEl;
                });
            },
            _onItemMouseDown: function (sender, event) {
                this.selectedItem(sender.model());
            }
        }
    });

})(fruit, fruit.util, fruit.ui);